<template>
    <div style="background: #eff3f6; height: 1400px; padding: 10px">
        <el-row class="sider-a clearfix">
            <div class="form-input">
                <div class="grid-content bg-purple">
                    <div class="grid-content bg-purple"><span size="small" class="from-name">所属区域：</span>
                        <el-cascader size="small"
                                     :options="options2"
                                     @active-item-change="handleItemChange"
                                     :props="props"
                        ></el-cascader>
                    </div>
                </div>
            </div>
            <div class="form-input">
                <div class="grid-content bg-purple">
                    <div class="demo-input-suffix">
                        <span size="small" class="from-name">聊天时间：</span>
                        <el-date-picker size="small"
                                        v-model="value4"
                                        type="datetimerange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </div>
            </div>
            <div class="form-input">
                <div class="grid-content bg-purple">
                    <div class="grid-content bg-purple-light">
                        <el-button type="primary" size="mini"><i class="el-icon-search"
                                                                 style="font-size:14px; margin: 0px 4px 0px 0px;"></i>查询
                        </el-button>
                    </div>
                </div>
            </div>
        </el-row>


        <el-row style="background: #fff; padding: 10px; margin-bottom: 10px;">
            <div class="gj-map">
                <div class="map-from">
                    <el-select size="medium" v-model="value5" multiple placeholder="多轨融合" class="map-multiple-select"
                               style="width: 300px">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="map-from">
                    <div class="grid-content bg-purple">
                        <el-button size="medium" class="dl-btn">
                            <el-checkbox label="" style="margin: 0px 4px 0px 0px"></el-checkbox>
                            热力轨迹
                        </el-button>

                    </div>

                </div>
                <div class="map-fromr">


                    <div class="grid-content bg-purple-light" style="float: right">
                        <el-radio-group v-model="a1" size="medium">
                            <el-radio-button label="矢量"></el-radio-button>
                            <el-radio-button label="影像"></el-radio-button>
                            <el-radio-button label="叠加"></el-radio-button>

                        </el-radio-group>
                    </div>
                </div>


                <div class="returnpanel" style="display: bl"><i class="return-icon-bf"></i></div>


                <el-row class="broadside" style="display: none">
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <h1 class="tit-dx"><span class="gx-text">轨迹列表</span><i class=" return-icon "></i></h1>
                            <ul class="p-check">
                                <li>
                                    <el-col :span="2">
                                        <div class="grid-content bg-purple"><span class="order-icon">1</span></div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="grid-content bg-purple-light"><p style="width: 300px;">

                                            <span class="p-tit"> 赣州第一中学</span>
                                            <span class="p-type"> WI-FI围栏，设备编号：3607011121221312</span>
                                        </p></div>
                                    </el-col>
                                </li>
                                <li>
                                    <el-col :span="2">
                                        <div class="grid-content bg-purple"><span class="order-icon">2</span></div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="grid-content bg-purple-light"><p style="width: 300px;">

                                            <span class="p-tit"> 赣州第一中学</span>
                                            <span class="p-type"> WI-FI围栏，设备编号：3607011121221312</span>
                                        </p></div>
                                    </el-col>
                                </li>
                                <li>
                                    <el-col :span="2">
                                        <div class="grid-content bg-purple"><span class="order-icon">3</span></div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="grid-content bg-purple-light"><p style="width: 300px;">

                                            <span class="p-tit"> 赣州第一中学</span>
                                            <span class="p-type"> WI-FI围栏，设备编号：3607011121221312</span>
                                        </p></div>
                                    </el-col>
                                </li>
                                <li>
                                    <el-col :span="2">
                                        <div class="grid-content bg-purple"><span class="order-icon">4</span></div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="grid-content bg-purple-light"><p style="width: 300px;">

                                            <span class="p-tit"> 赣州第一中学</span>
                                            <span class="p-type"> WI-FI围栏，设备编号：3607011121221312</span>
                                        </p></div>
                                    </el-col>
                                </li>
                                <li>
                                    <el-col :span="2">
                                        <div class="grid-content bg-purple"><span class="order-icon">5</span></div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="grid-content bg-purple-light"><p style="width: 300px;">

                                            <span class="p-tit"> 赣州第一中学</span>
                                            <span class="p-type"> WI-FI围栏，设备编号：3607011121221312</span>
                                        </p></div>
                                    </el-col>
                                </li>
                                <li>
                                    <el-col :span="2">
                                        <div class="grid-content bg-purple"><span class="order-icon">6</span></div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="grid-content bg-purple-light"><p style="width: 300px;">

                                            <span class="p-tit"> 赣州第一中学</span>
                                            <span class="p-type"> WI-FI围栏，设备编号：3607011121221312</span>
                                        </p></div>
                                    </el-col>
                                </li>
                                <li>
                                    <el-col :span="2">
                                        <div class="grid-content bg-purple"><span class="order-icon">7</span></div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="grid-content bg-purple-light"><p style="width: 300px;">

                                            <span class="p-tit"> 赣州第一中学</span>
                                            <span class="p-type"> WI-FI围栏，设备编号：3607011121221312</span>
                                        </p></div>
                                    </el-col>
                                </li>

                            </ul>
                        </div>
                    </el-col>
                    <el-button size="small" type="success" class="gjhf-btn"><i class="gjhf-icon"></i><span
                            style="color: #1dcbb5; font-size: 14px;">轨迹回放</span></el-button>
                    <el-pagination small style="width: 360px; margin: 20px 0px 0px 0px;"
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"
                                   :current-page.sync="currentPage1"
                                   :page-size="100"
                                   layout="total, prev, pager, next"
                                   :total="1000">
                    </el-pagination>
                </el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">

                        <el-popover
                                placement="top"
                                width="600"
                                trigger="click">
                            <div style="width: 600px; height: 300px;">

                                <h1 class="tit-gjmx"><i class="gj-icon"></i>轨迹明细</h1>
                                <div class="boxtext">

                                    <span class="card-tit">活动地点</span>
                                    永乐大酒店上上城店（云审计 （ 设备编号=3607011121221312））
                                    <span class="card-tit"> 活动内容：</span>
                                    <p><span class="main-t">1、MAC地址（D2-1F-81-14-72-38）</span> <span class="date-t">2019-01-03 21:37:53</span>
                                        <br>
                                        <span class="main-t"> 2、QQ（789645233）</span> <span class="date-t">2019-01-03 21:37:53</span>
                                        <br>
                                        <span class="main-t"> 3、IMSI串码（43012914898787）</span> <span class="date-t">2019-01-03 21:37:53</span>
                                        <br>
                                        <span class="main-t"> 4、MAC地址（D2-1F-81-14-72-38）</span> <span class="date-t">2019-01-03 21:37:53</span>
                                        <br>
                                    </p>
                                </div>
                                <el-pagination style="float: right"
                                               layout="prev, pager, next"
                                               :total="50">
                                </el-pagination>
                            </div>
                            <el-button slot="reference">地址</el-button>
                        </el-popover>


                    </div>
                </el-col>

            </div>

        </el-row>
        <el-col :span="24" class="sider-c">
            <div class="grid-content bg-purple-dark">
                <el-tabs v-model="activeName" @tab-click="handleClick" class="menu-t">
                    <el-tab-pane label="活跃时段" name="first">活跃时段</el-tab-pane>
                    <el-tab-pane label="活跃地点" name="second">活跃地点</el-tab-pane>

                </el-tabs>

            </div>
        </el-col>

    </div>
</template>

<script>
    export default {
        name: "trace",
        data() {
            return {
                options: [{
                    value: '选项1',
                    label: '虚拟身份'
                }, {
                    value: '选项2',
                    label: 'MAC地址'
                }, {
                    value: '选项3',
                    label: '手机号码'
                }, {
                    value: '选项4',
                    label: 'IMEI串号'
                }, {
                    value: '选项4',
                    label: 'IMSI串号'
                },
                    {
                        value: '选项5',
                        label: '实名身份'
                    }],
                a1: '矢量',
                activeName: 'first',

                radio1: '上海',

                value4: '',
                value5: [],
                options2: [{
                    label: '江苏',
                    cities: []
                }, {
                    label: '浙江',
                    cities: []
                }],
                props: {
                    value: 'label',
                    children: 'cities'
                }
            };
        },


        methods: {
            handleItemChange(val) {
                // console.log('active item:', val);
                setTimeout(() => {
                    if (val.indexOf('江苏') > -1 && !this.options2[0].cities.length) {
                        this.options2[0].cities = [{
                            label: '南京'
                        }];
                    } else if (val.indexOf('浙江') > -1 && !this.options2[1].cities.length) {
                        this.options2[1].cities = [{
                            label: '杭州'
                        }];
                    }
                }, 300);
            }
        }
    }
</script>

<style scoped>

    div[id|=el-tooltip] {
        border: 0px !important;
        box-shadow: 2px 2px 1px rgba(0, 0, 0, .15) !important;
    }

    .my-tooltop .is-light {
        border: 0px !important;
        box-shadow: 2px 2px 1px rgba(0, 0, 0, .15);
    }

    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    ul,
    p {
        margin: 0;
        padding: 0;
        font-weight: normal;
        list-style-type: none;
    }

    .clearfix:after {
        content: "\200B";
        display: block;
        height: 0;
        clear: both;
    }

    .gj-map {
        height: 900px;
        padding: 10px;
        background-size: cover;
        position: relative;
    }

    .sider-a {
        height: 50px;
        background: #fff;
        margin: 10px 0px 10px 0px;
        padding: 10px 0px 10px 0px;
    }

    .from-name {
        font-size: 14px;
    }

    .dl-btn {
        box-shadow: 1px 2px 1px rgba(0, 0, 0, .15);
        border: none;
        color: #4c4c4c;
    }

    .dl-btn:hover {
        background: #fff;
    }

    .map-multiple-select {
        width: 320px;
    }

    .card-tit {
        font-size: 14px;
        font-weight: bold;
        display: block;
    }

    .tit-gjmx {
        width: 600px;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #e8e8e8;
        font-size: 16px;
        font-weight: bold;
        color: #07111B;
    }

    .gj-icon {
        width: 4px;
        height: 20px;
        background: #419fff;
        display: block;
        float: left;
        margin: 10px 10px 0px 0px;
        color: #1dcbb5;
    }

    .gjmx-text {
        display: block;
        font-size: 14px;
        color: #000;
        line-height: 40px;
        font-weight: bold;
    }

    .boxtext {
        text-align: left;
        color: #4c4c4c;
        font-size: 14px;
        line-height: 30px;
        padding: 0px 10px 10px 10px;
    }

    .sider-c {
        height: 200px;
        background: #fff;
    }

    .menu-t {
        margin: 10px 20px 0px 20px;
    }

    .broadside {
        background: #fff;
        width: 360px;
        height: 640px;
        position: absolute;
        right: 10px;
        top: 60px;
        z-index: 9999;
    }

    .tit-dx {
        height: 30px;
        background: #419fff;
        padding: 0px 10px 0px 10px;
    }

    .gx-text {
        display: block;
        float: left;
        line-height: 30px;
        font-size: 14px;
        color: #fff;
        font-weight: bold;
    }

    .return-icon {
        width: 22px;
        height: 22px;
        background: url("../assets/waico.png") -207px -131px;
        float: right;
        margin: 6px 0px 0px 0px;
        cursor: pointer;
    }

    .returnpanel {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 4px 8px 0 rgba(28, 31, 33, .1);
        position: absolute;
        right: 30px;
        top: 70px;
        z-index: 9999;
        cursor: pointer;
    }

    .return-icon-bf {
        width: 20px;
        height: 20px;
        background: url("../assets/waico.png") -158px -131px;
        display: block;
        margin: 15px 0px 0px 14px;
    }

    .p-check {
        padding: 6px 10px 10px 10px;
    }

    .p-check li {
        display: block;
        text-align: left;
        min-height: 60px;
        border-bottom: 1px dashed #ededed;
        padding: 6px 0px 4px 0px;
    }

    .order-icon {
        width: 20px;
        height: 20px;
        background: #e8eaec;
        border-radius: 50%;
        font-size: 14px;
        color: #9299a1;
        display: block;
        line-height: 20px;
        text-align: center;
        font-weight: bold;
        margin: 5px 8px 0px 0px;
    }

    .p-tit {
        font-size: 14px;
        color: #4c4c4c;
        display: block;
        width: 300px;
        line-height: 30px;
    }

    .p-type {
        color: #666;
        font-size: 14px;
        line-height: 20px;
    }

    .gjhf-btn {
        border: 1px solid #1dcbb5;
        color: #1dcbb5;
        background: #fff;
    }

    .gjhf-btn:hover {
        background: #e7f9f7;
        border: 1px solid #1dcbb5;
        color: #fff;
    }

    .gjhf-icon {
        width: 16px;
        height: 16px;
        background: url("../assets/waico.png") -128px -129px;
        display: block;
        float: left;
        margin: 0px 5px 0px 0px;
    }

    .sider-a {
        height: 50px;
        background: #fff;
        margin: 10px 0px 10px 0px;
        padding: 10px 0px 10px 10px;
    }

    .from-name {
        font-size: 14px;
    }

    .sider-c {
        height: 400px;
        background: #fff;
        margin: 0px 0px 10px 0px;
    }

    .menu-t {
        margin: 10px 20px 0px 20px;
    }

    .main-t {
        display: block;
        float: left;
    }

    .date-t {
        display: block;
        float: right;
        color: #93999F;
    }

    .form-input {
        float: left;
        padding: 0px 10px 0px 0px;
    }



    .map-from{ float: left; margin: 0px 10px 0px 0px;}

    .map-fromr{ float: right;}

</style>